<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>Title</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .title {
      width: 100%;
      line-height: 25px;
      padding: 2px;
      background-color: rgb(215, 169, 99);
      margin: 5px;
    }

    .box-flex {
      /* 类似与block */
      display: flex;
      width: 100%;
      background-color: bisque;
      padding: 10px;
    }

    .box-flex div {
      width: 100px;
      height: 100px;
      background-color: #2dbe8f;
      margin: 10px 10px 10px 0;
      line-height: 100px;
      text-align: center;
    }

    .box-inlie-flex {
      /* 类似inline-block不会占用整行 */
      display: inline-flex;
      background-color: bisque;
      padding: 10px;
    }

    .box-inlie-flex div {
      width: 100px;
      height: 100px;
      background-color: #2dbe8f;
      margin-right: 20px;
      line-height: 100px;
      text-align: center;
    }

    .box-inlie-flex div:last-child {
      margin-right: 0;
    }

    .box-flex-direction {
      flex-direction: row;
    }

    .box-flex-direction-reverse {
      flex-direction: row-reverse;
    }

    .box-flex-direction-column {
      flex-direction: column;
    }

    /* .box-flex-direction-column div {
      margin-bottom: 10px;
    } */

    .box-flex-direction-column-reverse {
      flex-direction: column-reverse;
    }

    /* .box-flex-direction-column-reverse div {
      margin-top: 10px;
    } */

    .box-flex-wrap {
      flex-wrap: wrap;
    }

    .box-flex-wrap div {
      width: 200px;
    }

    .box-flex-flow {
      flex-flow: row nowrap;
    }

    .box-justify-content {
      justify-content: flex-start;
    }

    .box-justify-content-flex-end {
      justify-content: flex-end;
    }

    .box-justify-content-center {
      justify-content: center;
    }

    .box-justify-content-space-between {
      justify-content: space-between;
    }

    .box-justify-content-space-around {
      justify-content: space-around;
    }

    .box-align-item-flex-start {
      align-items: flex-start;
    }

    .box-align-item-flex-end {
      align-items: flex-end;
    }

    .box-align-item-center {
      align-items: center;
    }

    .box-align-item-baseline {
      align-items: baseline;
    }

    .box-align-item-stretch div {
      height: auto;
    }

    .box-align-item-stretch {
      align-items: stretch;
    }

    /* 设置min-height是其一是为了对比出属性的不同, 其二因为当页面缩小，内容会超出边界 */
    .box-align-content-flex-start {
      min-height: 400px;
      align-content: flex-start;
    }

    .box-align-content-flex-end {
      min-height: 400px;
      align-content: flex-end;
    }

    /* 多行垂直居中 */
    .box-align-content-center {
      min-height: 400px;
      align-content: center;
    }

    .box-align-content-space-between {
      min-height: 400px;
      align-content: space-between;
    }

    .box-align-content-space-around {
      min-height: 400px;
      align-content: space-around;
    }

    .box-align-content-stretch div {
      height: auto;
    }

    .box-align-content-stretch {
      min-height: 400px;
      align-content: stretch;
    }

    .box-flex-grow-0 div {
      flex-grow: 0;
    }

    .box-flex-grow-1 div {
      flex-grow: 1;
    }

    /* flex-basis生效 */
    .box-flex-basis div {
      width: 100px;
      flex-basis: 300px;
    }

    .box-align-self {
      min-height: 400px
    }

    .box-align-self div:nth-child(1) {
      align-self: flex-start;
    }

    .box-align-self div:nth-child(2) {
      align-self: center;
    }

    .box-align-self div:nth-child(3) {
      align-self: flex-end;
    }
  </style>
</head>

<body>
  <!-- 容器的属性
   1、display: flex/inline-flex(容器的子元素会变成项目更深层次不会成为容器成员)
   2、flex-direction:
   3、flex-wrap
   4、flex flow
   5、justify-content
   6、align-item
   7、align-content -->
  <!--flex 布局的子元素不会脱离文档流,float会脱离文档流，注意清除浮动-->
  <div class="title">display:flex</div>
  <div class="box-flex">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
  </div>
  <div class="title">display:inline-flex</div>
  <div class="box-inlie-flex">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
  </div>
  <div class="title">flex-direction:row</div>
  <div class="box-flex box-flex-direction">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
  </div>
  <div class="title">flex-direction:row-reverse</div>
  <div class="box-flex box-flex-direction-reverse">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
  </div>
  <div class="title">flex-direction:column</div>
  <div class="box-flex box-flex-direction-column">
    <div>1</div>
    <div>3</div>
    <div>3</div>
    <div>4</div>
  </div>
  <div class="title">flex-direction:column-reverse</div>
  <div class="box-flex box-flex-direction-column-reverse">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
  </div>
  <!-- 换行,默认nowrap不换行 -->
  <div class="title">flex-wrap:nowrap</div>
  <div class="box-flex">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
  </div>
  <div class="title">flex-wrap:wrap</div>
  <div class="box-flex box-flex-wrap">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
  </div>
  <div class="title">flex-flow:该属性是flex-direction与flex-wrap属性的简写默认值为row nowrap</div>
  <div class="box-flex box-flex-flow">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
  </div>
  <div class="title">justify-content:该属性是主轴整体的对其方式 flex-start|flex-end|center|space-between|space-around</div>
  <div class="title">justify-content:flex-start</div>
  <div class="box-flex box-justify-content">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
  </div>
  <div class="title">justify-content:flex-end</div>
  <div class="box-flex box-justify-content-flex-end">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
  </div>
  <div class="title">justify-content:center</div>
  <div class="box-flex box-justify-content-center">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
  </div>
  <!-- 可以创造左右两个盒子一个居左一个居右，中间盒子居中的格局 -->
  <div class="title">justify-content:space-between: 两端对其项目中间间隔都相等</div>
  <div class="box-flex box-justify-content-space-between">
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>
  <div class="title">justify-content:space-around: 两侧间隔相等，项目之间的间隔比项目与边框的间隔大一倍</div>
  <div class="box-flex box-justify-content-space-around">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
  </div>
  <!-- align-item属性定义了项目在交叉轴上如何对齐 flex-start|flex-end|center|baseline|stretch -->
  <div class="title">align-item:flex-start: 交叉轴起点对齐</div>
  <div class="box-flex box-align-item-flex-start">
    <div>1</div>
    <div style="height: 200px;">2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
  </div>
  <div class="title">align-item:flex-end: 交叉轴终点对齐</div>
  <div class="box-flex box-align-item-flex-end">
    <div>1</div>
    <div>2</div>
    <div style="height: 200px;">3</div>
    <div>4</div>
    <div>5</div>
  </div>
  <div class="title">align-item:center: 交叉轴中间对齐</div>
  <div class="box-flex box-align-item-center">
    <div>1</div>
    <div>2</div>
    <div style="height: 200px;">3</div>
    <div>4</div>
    <div>5</div>
  </div>
  <div class="title">align-item:baseline: 交叉轴基线对齐</div>
  <div class="box-flex box-align-item-baseline">
    <div>1</div>
    <div>2</div>
    <div style="height: 200px;line-height: 50px;">3</div>
    <div>4</div>
    <div>5</div>
  </div>
  <div class="title">align-item:stretch(默认值): 如果项目未设置高度或者为auto,将占满整个容器的高度</div>
  <div class="box-flex box-align-item-stretch">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
  </div>
  <!-- align-content属性定义了多根轴线(多行)，在交叉轴上的对齐方式
  如果项目只有一根轴线该属性不起作用 flex-start|flex-end|center|space-between|space-around|stretch -->
  <div class="title">align-content:flex-start:交叉轴起点对其</div>
  <div class="box-flex box-flex-wrap box-align-content-flex-start">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
  </div>
  <div class="title">align-content:flex-end:交叉轴终点对其</div>
  <div class="box-flex box-flex-wrap box-align-content-flex-end">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
  </div>
  <div class="title">align-content:center:交叉轴中点对齐</div>
  <div class="box-flex box-flex-wrap box-align-content-center">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
  </div>
  <div class="title">align-content:space-between:交叉轴两端对齐，中间间隔相等</div>
  <div class="box-flex box-flex-wrap box-align-content-space-between">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
  </div>
  <div class="title">align-content:space-around:交叉轴两端相等，中间间隔是两端间隔的两倍</div>
  <div class="box-flex box-flex-wrap box-align-content-space-around">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
  </div>
  <div class="title">align-content:stretch如果盒子没有设置高度或者高度为auto,所有盒子将撑满整个容器的高度</div>
  <div class="box-flex box-flex-wrap box-align-content-stretch">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
  </div>
  <!-- 项目的属性
  1.order
  2.flex-grow
  3.flex-shrink
  4.flex-basis
  5.flex
  6.align-self
  -->
  <div class="title">order属性定义项目的排列顺序,数值越小排列越靠前,默认为零</div>
  <div class="box-flex">
    <div style="order: 1;">1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
  </div>
  <div class="title">flex-grow属性定义项目的放大比例,默认为零，即如果存在剩余空间，也不放大</div>
  <div class="title">如果所有的flex-grow属性都设置为1，则他们将等分剩余空间</div>
  <div class="title">flex-grow设置为0</div>
  <div class="box-flex box-flex-grow-0">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
  </div>
  <div class="title">flex-grow设置为1</div>
  <div class="box-flex box-flex-grow-1">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
  </div>
  <div class="title">如果有的项目有flex-grow属性,有的项目设置width属性,有flex-grow属性的项目将会等分剩余空间</div>
  <div class="box-flex">
    <div style="width: 300px;">1</div>
    <div style="flex-grow: 2;">2</div>
    <div style="flex-grow: 1;">3</div>
    <div style="flex-grow: 1;">4</div>
  </div>
  <div class="title">flex-shrink属性定义项目的缩小比例,默认为1,即如果空间不足,该项目将缩小</div>
  <div class="title">如果所有的flex-shrink属性都设置为1,当空间不足时,都将等比例缩小,如果一个项目的flex-shrink属性为0,其他项目都为1,则当空间不足时,前者不缩小,负值对该属性无效</div>
  <div class="title">flex-shrink设置为0</div>
  <div class="box-flex">
    <div style="width: 90%;flex-shrink: 0;">1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
  </div>
  <div class="title">flex-basis指定了 flex 元素在主轴方向上的初始大小,默认值为auto,如果不使用 box-sizing 改变盒模型的话，那么这个属性就决定了 flex 元素的内容盒的尺寸</div>
  <div class="title">flex-basis比width具有更高的优先级</div>
  <div class="box-flex box-flex-basis">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
  </div>
  <div class="title">flex属性指定了 flex属性是flex-grow,flex-shrink,flex-basis的简写,默认值为0 1 auto</div>
  <div class="title">align-self属性允许单个项目有与其他项目不一样的对其方式</div>
  <div class="box-flex box-align-self">
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>
</body>

</html>